<template>
  <view class="camera-box" :class="{ show: modelValue }" :style="{ height: height + 'px', top: systemStore.statusBarHeight + 44 + 'px' }" @touchmove.prevent>
    <camera device-position="back" flash="off" @error="error" class="width-full height-full relative" @touchmove.prevent @initdone="initdone">
<!--      <cover-view class="padding-30 width-full height-full prompt">
        <cover-view class="prompt-box height-full flex-column align-center justify-between">
          <cover-view class="width-full flex-row align-start justify-start padding-20 border-box" @click="close">
            <cover-view class="padding-20 color-white cancel text-28">取消</cover-view>
          </cover-view>
          <cover-view class="padding-bottom-20 flex-column flex-center">
            <cover-view class="text-28 color-white margin-bottom-10">轻触拍照</cover-view>
            <cover-view class="shoot-box margin-bottom-30" @click="takePhoto">
              <cover-view class="height-full border-box shoot" />
            </cover-view>
            <cover-view class="text-32 text-bold color-error">手机屏幕边框尽量贴合红线框</cover-view>
          </cover-view>
        </cover-view>
      </cover-view>-->
    </camera>
    <cover-view class="padding-30 width-full height-full prompt">
      <cover-view class="prompt-box height-full flex-column align-center justify-between relative">
        <cover-image src="/static/back.png" class="back block" @click="close" />

        <cover-view class="width-full flex-row align-start justify-start padding-20 border-box">
<!--          <cover-view class="padding-20 color-white cancel text-28">取消</cover-view>-->
        </cover-view>

        <cover-view class="padding-bottom-20 flex-column flex-center">
          <cover-view class="text-28 color-white margin-bottom-10">轻触拍照</cover-view>
          <cover-view class="shoot-box margin-bottom-30" @click="takePhoto">
            <cover-view class="height-full border-box shoot" />
          </cover-view>
          <cover-view class="text-28 text-bold color-error margin-bottom-6">请贴合红线框聚焦后再拍&nbsp;<cover-view class="kong" /></cover-view>
          <cover-view class="text-28 text-bold color-error">避免反光，模糊只拍题目和选择&nbsp;<cover-view class="kong" /></cover-view>
        </cover-view>
      </cover-view>
    </cover-view>
  </view>
</template>

<script setup lang="ts">
import useSystemStore from '@/store/system'
import { toast } from '@/common/util'
import type { AnyObject } from '@/common/types'

const systemStore = useSystemStore()

interface IProps{
  modelValue: boolean
  height: number
}

withDefaults(defineProps<IProps>(), {
  modelValue: false,
  height: 0
})

const $emit = defineEmits(['update:modelValue', 'close', 'success', 'initdone'])

function takePhoto() {
  const ctx = uni.createCameraContext()
  ctx.takePhoto({
    quality: 'high',
    success: (res) => {
      $emit('success', res.tempImagePath)
      close()
    }
  })
}

function error(e: AnyObject) {
  console.log(e.detail)
  uni.hideLoading()
  toast(e.detail)
}

function close() {
  $emit('update:modelValue', false)
  $emit('close')
}

function initdone() {
  $emit('initdone')
}
</script>

<style scoped lang="scss">
@include setMargin(bottom, 6);

.camera-box{
  width: 750rpx;
  @include position(fixed, 0, 0, $z-index: 100);
  display: none;
  visibility: hidden;

  &.show{
    display: block;
    visibility: visible;
  }

  .prompt{
    box-sizing: border-box;
    @include position(absolute, 0, 0, $z-index: 10);
  }

  .prompt-box{
    border-radius: $border-radius-df;
    box-sizing: border-box;
    border: 4rpx dashed $color-error;

    .back{
      width: 50rpx;
      height: 50rpx;
      @include position(absolute, $bottom: 160rpx, $right: 100rpx, $z-index: 10);
    }

  }

  .cancel{
    border-radius: $border-radius-xs;
    background: $color-primary;
  }

  .shoot-box{
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    background: $color-placeholder;
    padding: 10rpx;

    .shoot{
      border-radius: 50%;
      background: $color-white;
    }

  }

  .kong{
    display: inline-block;
    line-height: 40rpx;
    width: 10rpx;
  }

}
</style>
